<template>
    <div class="correct-homework">
        <div class="homework-box">
            <div class="search-input">
                <a-form-model :model="formData">
                    <a-form-model-item label="选择学校">
                        <a-select v-model="formData.school_name" style="width: 200px" placeholder="请选择所属学校" @change="handleSchoolChange">
                            <a-select-option v-for="item in schoolData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="选择班级">
                        <a-select v-model="formData.class_id" style="width: 200px" placeholder="请选择">
                            <a-select-option v-for="item in classData" :value="item.id" :key="item.id">{{ item.title }}</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item label="作品名">
                        <a-input v-model="formData.name" placeholder="请输入作品名" />
                    </a-form-model-item>
                    <a-form-model-item label="姓名">
                        <a-input v-model="formData.student_name" placeholder="请输入姓名" />
                    </a-form-model-item>
                    <a-form-model-item label="评分状态">
                        <a-select v-model="formData.score_status" style="width: 200px" placeholder="请选择">
                            <a-select-option value="1">已评分</a-select-option>
                            <a-select-option value="0">未评分</a-select-option>
                        </a-select>
                    </a-form-model-item>
                    <!-- <a-form-model-item label="上课记录ID">
                        <a-input v-model="formData.edu_log_id" placeholder="请输入记录ID" />
                    </a-form-model-item> -->
                  <a-form-model-item label="上课节次">
                    <a-select v-model="formData.schedule_id" style="min-width: 200px" placeholder="请选择">
                      <a-select-option v-for="item in scheduleData" :value="item.id" :key="item.id">{{ item.title }}</a-select-option>
                    </a-select>
                  </a-form-model-item>
                  <a-form-model-item label="上课时间">
                    <a-range-picker
                        v-model="eduRangeDate"
                        :show-time="{ format: 'HH:mm' }"
                        format="YYYY-MM-DD HH:mm"
                        :placeholder="['开始时间', '结束时间']"
                        @change="onEduRangeDateChange"
                    />
                  </a-form-model-item>
                    <a-form-model-item label="提交时间">
                        <a-range-picker
                            v-model="rangeDate"
                            :show-time="{ format: 'HH:mm' }"
                            format="YYYY-MM-DD HH:mm"
                            :placeholder="['开始时间', '结束时间']"
                            @change="onChange"
                            @ok="onOk"
                        />
                    </a-form-model-item>
                    <a-form-model-item>
                        <a-button @click="resetWork" style="margin-right:20px">重置</a-button>
                        <a-button @click="onSearch" type="primary" style="margin-right:40px">搜索</a-button>
                        <a-button type="danger" @click="exportWork">导出</a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div class="table-box">
                <a-table :columns="columns" :data-source="tableData" :rowKey="(row, index) => {return index;}" bordered>
                    <a slot="name"></a>
                     <template #score="text">
                        <span>{{ text ? text : '未评分' }}</span>
                    </template>
                    <template slot="operation" slot-scope="text, record">
                        <div class="oper-btn">
                            <a-button type="primary" @click="() => toHomework(record)">查看并评分</a-button>
                            <!-- <a-button style="margin-left: 10px" type="primary" :disabled="record.score_status === 0" @click="downLoadWord(record)">下载</a-button>
                            <a-button style="margin-left: 10px" type="primary" :disabled="record.score_status === 0" @click="shareContent(record)">分享</a-button> -->
                        </div>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>
<script>
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
  },
  {
    title: '作品名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '用户ID',
    dataIndex: 'user_id',
    key: 'user_id',
  },
  {
    title: '上课记录ID',
    key: 'edu_log_id',
    dataIndex: 'edu_log_id',
  },
  {
    title: '学生姓名',
    key: 'student_name',
    dataIndex: 'student_name',
  },
  {
    title: '班级名称',
    key: 'class_name',
    dataIndex: 'class_name',
  },
  {
    title: '教师评分',
    key: 'score',
    dataIndex: 'score',
    scopedSlots: { customRender: 'score' }
  },
  {
    title: '作业提交',
    key: 'create_time_text',
    dataIndex: 'create_time_text',
  },
  {
    title: '评分人',
    key: 'teacher_name',
    dataIndex: 'teacher_name',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];

export default{
    data() {
        return {
            formData: {
                class_id: '',
                name: '',
                student_name: '',
                score_status: '',
                edu_log_id: '',
                schedule_id: '',
                create_time: '',
                edu_time: ''
            },
            tableData: [],
            classData: [],
            columns,
            schoolData: [],
            scheduleData: [],
            rangeDate: [],
            eduRangeDate: [],
        }
    },
    computed: {
        imageUrl() {
            return process.env.VUE_APP_IMAGE_URL; // 自动匹配当前环境
        }
    },
    mounted() {
        this.getSchoolList();
        this.getHomeWorkList();
        this.getScheduleList();
    },
    methods: {
        async getSchoolList() {
            const res = await this.$request.get('api/school/index');
            if (res.code === 1) {
                // console.log(res.data, 'res.datares.data');
                this.schoolData = res.data || [];
            }
        },
        handleSchoolChange(value) {
            console.log(`selected ${value}`);
            this.getClassList(value);
            this.getScheduleList(value);
        },
        onChange(value, dateString) {
            console.log('Selected Time: ', value);
            console.log('Formatted Selected Time: ', dateString);
            this.formData.create_time = dateString.join(' - ');
        },
        onEduRangeDateChange(value, dateString) {
          this.formData.edu_time = dateString.join(' - ');
        },
        onOk(value) {
            console.log('onOk: ', value);
        },
        async getClassList() {
            const res = await this.$request.get(`api/school/banji_list?school_id`);
            if (res.code === 1) {
                console.log(res.data, 'res.datares.data');
                this.classData = res.data || [];
            }
        },
      async getScheduleList() {
        const res = await this.$request.get(`api/school/schedule_list?school_id=` + this.formData.school_name);
        if (res.code === 1) {
          this.scheduleData = res.data || [];
        }
      },
        async getHomeWorkList() {
            const res = await this.$request.get(`api/edu/teacher_homework_list?class_id=${this.formData.class_id}&name=${this.formData.name}&student_name=${this.formData.student_name}&score_status=${this.formData.score_status}&edu_log_id=${this.formData.edu_log_id}&schedule_id=${this.formData.schedule_id}&create_time=${this.formData.create_time}&edu_time=${this.formData.edu_time}`);
            if (res.code === 1) {
                res.data.data.forEach((item, index) => {
                    item.index = index + 1;
                })
                this.tableData = res.data.data || [];
                // console.log(res.data, 'ddddaatttt===');
            } else {
                this.$message.error(res.msg);
                this.tableData = [];
            }
        },
        onSearch() {
            this.getHomeWorkList();
        },
        exportWork() {
            this.$request.post(`api/edu/teacher_homework_export?class_id=${this.formData.class_id}&name=${this.formData.name}&student_name=${this.formData.student_name}&score_status=${this.formData.score_status}&edu_log_id=${this.formData.edu_log_id}&create_time=${this.formData.create_time}&edu_time=${this.formData.edu_time}`).then(res => {
                if (res.code == 1) {
                    const link = document.createElement('a');
                    link.href = res.data.filePath;
                    link.download = res.data.fileName;
                    link.click();
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        resetWork() {
            this.rangeDate = [];
            this.formData = {
                class_id: '',
                name: '',
                student_name: '',
                score_status: '',
                edu_log_id: '',
                create_time: ''
            }
            this.getHomeWorkList();
        },
        toHomework(record) {
            console.log(record, 'recordrecord');
            this.$router.push({
                name: 'myHomework',
                query: {
                    workObj: JSON.stringify(record),
                }
            })
        },
        downLoadWord(record) {
            console.log(record, 'recordrecord');
        },
        async shareContent(record) {
            try {
                await navigator.share({
                    title: record.name,
                    text: '这是要分享的文本内容',
                    url: 'https://www.example.com'
                });
            } catch (error) {
                console.log('分享失败', error);
            }
        }
    },
}
</script>
<style lang="less" scoped>
.correct-homework{
    width: 100%;
    .search-input{
        // height: 135px;
        background: #FFFFFF;
        box-shadow: 0px 2px 4px 0px rgba(0,69,207,0.08);
        border-radius: 12px;
        padding: 30px;
        margin-top: 30px;
    }
    .actionBtn{
        width: 94px;
        height: 32px;
        line-height: 32px;
        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
        border-radius: 6px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        display: block;
        text-align: center;
    }
    /deep/ .ant-form{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    /deep/ .ant-form-item{
        display: flex;
    }
    .table-box{
        margin-top: 30px;
    }
}
</style>